<!-- BaseDialog.vue -->
<template>
  <el-dialog v-bind="$attrs" :width="width" :model-value="visible" @update:model-value="$emit('update:visible', $event)"
    @close="$emit('close')" @closed="$emit('closed')">
    <!-- 自定义标题插槽 -->
    <template v-if="$slots.header" #header>
      <slot name="header"></slot>
    </template>

    <!-- 内容主体 -->
    <slot></slot>

    <!-- 自定义底部插槽 -->
    <template v-if="showFooter" #footer>
      <slot name="footer">
        <el-button @click="$emit('cancel')">取消</el-button>
        <el-button type="primary" @click="$emit('confirm')">确定</el-button>
      </slot>
    </template>
  </el-dialog>
</template>
  
<script setup lang="ts">
interface Props {
  visible: boolean
  showFooter?: boolean
  title?: string
  width?: string | number
  fullscreen?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  showFooter: false,
  title: '提示',
  width: '20%',
  fullscreen: false
})

defineEmits([
  'update:visible',
  'close',
  'closed',
  'confirm',
  'cancel'
])
</script>
  